import * as React from "react";
import { Menu, Modal } from "antd";
import "./HelpCenter.css";

interface HelpCenterState {
  modalVisible: boolean;
  openKeys: string[];
}

class HelpCenter extends React.Component<{}, HelpCenterState> {
  constructor(props: {}) {
    super(props);
    this.state = {
      modalVisible: false,
      openKeys: [],
    };
  }

  toggleModal = () => {
    this.setState((prevState) => ({
      modalVisible: !prevState.modalVisible,
    }));
  };

  onOpenChange = (keys: string[]) => {
    this.setState({ openKeys: keys });
  };

  render() {
    return (
      <>
        <button className="custom-question-mark" onClick={this.toggleModal}>?</button>
        <Modal
          title="常见问题"
          visible={this.state.modalVisible}
          footer={[
            <button key="back" onClick={this.toggleModal}>
              no
            </button>,
            <button key="submit" type="primary" onClick={this.toggleModal}>
              OK
            </button>,
          ]}
          onCancel={this.toggleModal}
        >
          <Menu
            onClick={(key) => console.log("Clicked item with key", key)}
            selectedKeys={[]}
            mode="inline"
            openKeys={this.state.openKeys}
            onOpenChange={this.onOpenChange}
          >
            <Menu.SubMenu key="常见问题" title="获取帮助和提示">
              <Menu.SubMenu key="常见问题-子菜单1" title="进入测试版本">
                <Menu.Item key="如何分享模板?">如何分享模板?</Menu.Item>
                <Menu.Item key="如何上传本地内容?">如何上传本地内容?</Menu.Item>
              </Menu.SubMenu>
              <Menu.SubMenu key="常见问题-子菜单2" title="常见问题">
                <Menu.Item key="如何分享模板?">如何分享模板?</Menu.Item>
                <Menu.Item key="如何上传本地内容?">如何上传本地内容?</Menu.Item>
                <Menu.Item key="下载的文件保存在哪?">下载的文件保存在哪?</Menu.Item>
                <Menu.Item key="如何添加标尺和参考线?">如何添加标尺和参考线?</Menu.Item>
                <Menu.Item key="如何制作表格?">如何制作表格?</Menu.Item>
                <Menu.Item key="如何完整页面下载?">如何完整页面下载?</Menu.Item>
                <Menu.Item key="如何设置图形渐变色?">如何设置图形渐变色?</Menu.Item>
                <Menu.Item key="如何设置动画效果?">如何设置动画效果?</Menu.Item>
                <Menu.Item key="如何成组/拆分组?">如何成组/拆分组?</Menu.Item>
                <Menu.Item key="如何添加蒙版?">如何添加蒙版?</Menu.Item>
                <Menu.Item key="如何上传字体包?">如何上传字体包?</Menu.Item>
              </Menu.SubMenu>
              <Menu.SubMenu key="常见问题-子菜单3" title="快捷键">
                <Menu.Item key="如何制作表格?">如何制作表格?</Menu.Item>
                <Menu.Item key="如何完整页面下载?">如何完整页面下载?</Menu.Item>
              </Menu.SubMenu>
              <Menu.SubMenu key="常见问题-子菜单4" title="在线客服">
                <Menu.Item key="如何设置图形渐变色?">如何设置图形渐变色?</Menu.Item>
                <Menu.Item key="如何设置动画效果?">如何设置动画效果?</Menu.Item>
              </Menu.SubMenu>
              <Menu.SubMenu key="常见问题-子菜单5" title="新手教程">
                <Menu.Item key="如何成组/拆分组?">如何成组/拆分组?</Menu.Item>
                <Menu.Item key="如何添加蒙版?">如何添加蒙版?</Menu.Item>
              </Menu.SubMenu>
              <Menu.SubMenu key="常见问题-子菜单6" title="录屏反馈">
                <Menu.Item key="如何上传字体包?">如何上传字体包?</Menu.Item>
              </Menu.SubMenu>
            </Menu.SubMenu>
          </Menu>
        </Modal>
      </>
    );
  }
}

export default HelpCenter;